<script setup lang="ts">
import Write from './components/Write.vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'
import { getInfoApi, getLogisticsInfoApi } from '@/api/purchase'
import { processingAccuracy } from '@/utils'

const { push, go } = useRouter()

const { query } = useRoute()

const { t } = useI18n()

const currentRow = ref<Record<string, any>>()
const tableData = ref<Array<Record<string, any>>>([])

const getTableDet = async () => {
  const res = await getInfoApi(query.id as string)
  if (res) {
    let logistics_amount = res.data.logistics_amount ? Number(res.data.logistics_amount) : 0
    let other_amount = res.data.other_amount ? Number(res.data.other_amount) : 0
    let product_total_amount = res.data.product_total_amount
      ? Number(res.data.product_total_amount)
      : 0
    let pay_amount = res.data.pay_amount ? processingAccuracy(Number(res.data.pay_amount), 2) : 0
    let total_amount = processingAccuracy(logistics_amount + other_amount + product_total_amount, 2)
    let unpay_amount = processingAccuracy(Number(total_amount) - Number(pay_amount), 2)
    let paid_amount = res.data.paid_amount ? processingAccuracy(Number(res.data.paid_amount), 2) : 0
    currentRow.value = {
      ...res.data,
      total_amount,
      unpay_amount,
      product_total_amount,
      paid_amount
    }
  }
}
const getLogisticsList = async () => {
  const resp = await getLogisticsInfoApi({
    purchase_order_id: query.id as string,
    from: 'detail'
  })
  tableData.value = resp.data.list
}
getTableDet()
getLogisticsList()

const writeRef = ref<ComponentRef<typeof Write>>()
</script>

<template>
  <ContentDetailWrap :title="t('purchase.edit')" @back="push('/purchase')">
    <Write
      ref="writeRef"
      :current-row="currentRow"
      :examine="true"
      :detail="true"
      @refresh-data="getTableDet"
    />

    <template #header>
      <BaseButton @click="push('/purchase')">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--      logisticsCosts-->
    <el-form label-width="130px" v-if="tableData.length">
      <el-form-item :label="t('purchase.logistics.logisticsCosts')">
        <!--      table-->
        <el-table
          :data="tableData"
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'left' }"
        >
          <el-table-column :label="t('purchase.logistics.fees')">
            <template #default="{ row }">
              <el-input v-model="row.amount" disabled type="number" />
            </template>
          </el-table-column>
          <el-table-column :label="t('purchase.logistics.name')">
            <template #default="{ row }">
              <el-input v-model="row.name" disabled />
            </template>
          </el-table-column>
          <el-table-column :label="t('purchase.logistics.orderNo')">
            <template #default="{ row }">
              <el-input v-model="row.order_number" disabled />
            </template>
          </el-table-column>
          <el-table-column :label="t('purchase.logistics.remark')">
            <template #default="{ row }">
              <el-input v-model="row.remark" disabled />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
  </ContentDetailWrap>
</template>
@/hooks/event/useEventBus
